﻿@{
    ViewBag.Title = "map";
    Layout = "~/Views/Shared/Template.cshtml";
}

<style>
    .container-map {
        box-sizing: border-box;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }

        .container-map .city-select {
            margin-top: 32px;
            height: 35px;
            width: 120px;
        }

    .lSidebar {
        height: 100%;
        width: 25%;
        /*width: 422px;*/
        background-color: #EEEEEE;
    }

        .lSidebar .submit table {
            border-collapse: separate;
            border-spacing: 15px;
            font-size: 16px;
            color: #3A3A3A;
            width: 388px;
            margin: 0 auto;
        }

        .lSidebar .submit {
            padding: 10px;
        }

            .lSidebar .submit input[type="button"] {
                height: 35px;
                width: 100px;
                line-height: 35px;
                text-align: center;
                color: white;
                background-color: #0298DC;
                border-radius: 5px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }

        .lSidebar .house-resource {
            background-color: white;
            padding: 15px 5px 0 10px;
            overflow-y: scroll;
            height: 370px;
        }

            .lSidebar .house-resource > p {
                margin-left: 20px;
                font-size: 14px;
                color: #5A5A5A;
            }

            .lSidebar .house-resource ul {
                width: 100%;
                background: url("") no-repeat;
            }

                .lSidebar .house-resource ul li {
                    height: 90px;
                    padding-bottom: 5px;
                    padding-top: 5px;
                    border-bottom: 1px solid #66ccff;
                }

                    .lSidebar .house-resource ul li img {
                        margin-right: 10px;
                        height: 82px;
                        width: 116px;
                        float: left;
                    }

    #leftWhere form table tr .tdbox {
        height: 30px;
        line-height: 30px;
        float: left;
        border: 1px solid #C3C3C3;
        background-color: #FAFAFA;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

        #leftWhere form table tr .tdbox .input-box {
            float: left;
            width: 49%;
        }

    #leftWhere.long {
        width: 307px;
    }

    #leftWhere.short {
        width: 121px;
    }

    #leftWhereform table tr .tdbox:hover {
        border: 1px solid #00a0e9;
    }

    #leftWhere .line2 {
        margin-top: 5px;
        float: left;
        display: inline-block;
        height: 20px;
        border-left: 1px solid silver;
        width: 0px;
    }

    #leftWhere form table tr .tdbox input {
        padding-left: 15px;
        font-size: 15px;
        color: #9F9F9F;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0);
        border: 0 none;
        cursor: pointer;
    }

    #leftWhere form table tr .tdbox ul {
        z-index: 2;
        width: 96%;
        margin-left: 3px;
        background-color: #FAFAFA;
        border: 1px solid #00a0e9;
        /*border-top: 0 none;*/
    }

        #leftWhere form table tr .tdbox ul > li {
            padding-left: 20px;
            line-height: 30px;
            cursor: pointer;
        }

            #leftWhere form table tr .tdbox ul > li:hover {
                background-color: #00a0e9;
                color: white;
            }
</style>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script src="~/Content/jquery.min.js"></script>
    <style type="text/css">
        #l-map {
            width: 800px;
            height: 800px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IqB6H8XQ6lqKSnZMCY2wr2uaFjQI752Q"></script>
    <title>地图找房</title>
</head>
<body>
    <!--我用来获取数据用的-->
    <input type="hidden" id="GetLoginName" value="@Session["LoginUserName"]" />
    <div class="lSidebar fl" style="width: 29%;margin-right:10px;">
        <div class="submit">
            <form action="#">
                <table id="leftWhere" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="pr">
                            <div>
                                <p class="fl slectName">类型：</p>
                                <div class="fl tdbox short tdbox1 pr">
                                    <select name="House_Type" id="House_Type" class="form-control" style="width:200px;">
                                        <option value="0">房源类型（户型）</option>
                                        <option value="伙办办公">写字楼</option>
                                        <option value="伙办商铺">商铺</option>
                                        <option value="伙办公寓">公寓</option>
                                    </select>
                                </div>
                            </div>
                        </td>
                    <tr>
                        <td>
                            <p class="fl slectName">城市：</p>
                            <div class="tdbox pr">
                                <select name="Province" class="form-control" style="width:200px;" onchange="bindCityList()" id="provinceId">
                                    <option>省</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:46px;">
                            <select name="City" class="form-control" style="width:200px;" onchange="bindAreaList()" id="cityId">
                                <option>城市</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:46px;">
                            <select name="Area" class="form-control" style="width:200px;" id="areaId">
                                <option>区域</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="fl slectName">价格：</p>
                            <div style="text-align:left;">
                                <div class="input-box pr">
                                    <select name="E_Price" id="Price" class="form-control" style="width:200px;">
                                        <option value="0">租金（千元/月）</option>
                                        <option value="1">< 1</option>
                                        <option value="1-3">1-3</option>
                                        <option value="3-5">3-5</option>
                                        <option value="5-10">5-10</option>
                                        <option value="> 10">> 10</option>
                                    </select>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="pr">
                            <div>
                                <p class="fl slectName">装修：</p>
                                <div class="fl tdbox short tdbox1 pr">
                                    <select name="E_Decorate" id="E_Decorate" class="form-control" style="width:200px;">
                                        <option value="0">装修程度（情况）</option>
                                        <option value="毛坯">毛坯</option>
                                        <option value="简装修">简装修</option>
                                        <option value="精装修">精装修</option>
                                        <option value="吊白网">吊白网</option>
                                        <option value="遗留装修">遗留装修</option>
                                    </select>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;
                            <input id="House_Search" value="搜索" type="button" />
                        </td>

                    </tr>
                </table>
            </form>
        </div>
        <div class="house-resource">
            <p style="">共找到<span id="houseCount" style="color: red" class="homeNum"> </span>套房屋信息</p>
            <ul class="message-box"></ul>

        </div>
    </div>
    <div id="l-map" style="width:70%; "></div>
</body>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京", 12);
    map.enableScrollWheelZoom(true);
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开
    var index = 0;
    var myGeo = new BMap.Geocoder();
    var adds = ['北京'];
    $(function () {
        $.ajax({
            type: "Post",
            url: "/Partner/HouseMessage_Map",
            dataType: "json",
            success: function (obj) {
                for (var i = 0; i < obj.length; i++) {
                    adds.push("" + obj[i].House_Address + obj[i].House_Name + "");
                }
            }
        })
    })

    bdGEO();
    function bdGEO() {
        var add = adds[index];
        geocodeSearch(add);
        index++;
    }
    function geocodeSearch(add) {
        if (index < adds.length) {
            setTimeout(window.bdGEO, 400);
        }
        myGeo.getPoint(add, function (point) {
            if (point) {
                var address = new BMap.Point(point.lng, point.lat);
                addMarker(address, add);
            }
        }, "北京市");
    }
    // 编写自定义函数,创建标注
    function addMarker(point, label) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        var opts = {
            width: 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: "伙办网房源信息", // 信息窗口标题
            enableMessage: true,//设置允许信息窗发送短息
        }
        var infoWindow = new BMap.InfoWindow("" + JSON.stringify(label) + "", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    }
    //图片标注
    //function addMarker(point, label) {
    //    //标注
    //    var icon = new BMap.Icon('http://a3.qpic.cn/psb?/V10kT2uj0u09zr/APWQpBLf3nKGHBjLuU7k5GF1VMvypqQl5FLdoKx1u9k!/b/dAEBAAAAAAAA&bo=ZABLAAAAAAARBx8!&rf=viewer_4', new BMap.Size(100, 75), {//是引用图标的名字以及大小，注意大小要一样
    //        anchor: new BMap.Size(10, 20)//这句表示图片相对于所加的点的位置
    //    });
    //    var mkr = new BMap.Marker(point, {
    //        icon: icon
    //    });
    //    map.addOverlay(mkr);
    //   //信息
    //    marker.addOverlay(label);
    //}
    $(function () {
        $.ajax({
            type: "Post",
            url: "/Partner/HouseMessage_Map",
            dataType: "json",
            success: function (obj) {
                obj = eval(obj);
                for (var i = 0; i < obj.length; i++) {
                    $('.message-box').append(
                   '<li hoseid=' + obj[i].House_Id + ' class="fcBlack clearfix">' +
                   '<a href="/HouseMessage/HouseMessage?House_Id=' + obj[i].House_Id + '"' + ' target="view_frame" class="fcBlack">' +
                   '<img class="fcBlack fl" src=\"http://47.93.33.136:8080/userfiles/1/images/adminReleaseRoom/img/2017/08/fangjian.jpg\" alt="图片"/>' +
                   '<div>' +
                   '<p class="fn-font-16 fcBlack">' + obj[i].House_Name + '</p>' +
                   '<p><span class="fn-font-clor-red">' + obj[i].House_Price + '</span>元/月</p>' +
                   '<p>可租面积 <span>' + obj[i].House_Area + 'm<sup>2</sup></span> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; <span class="fn-font-12">' + obj[i].House_Intro + '</span></p>' +
                   '</a>' +
                   '</div>' +
                   '</li>'
               )
                    $("#houseCount").text(obj.length);
                }
            }
        })
    })

    //搜索
    $("#House_Search").click(function () {
        var user = $("#GetLoginName").val();
        if (user == null || user == "") {
            alert("请先登录!");
            return;
        }
        else {
            var htype = $("#House_Type").val();
            var cityname = $("#provinceId").val();
            var zxadd = $("#E_Decorate").val();
            $.ajax({
                type: "post",
                url: "/Partner/Map_HouseSearch",
                data: { House_Type: htype, cityname: cityname, zxadd: zxadd },
                dataType: "Json",
                success: function (obj) {
                    $('.message-box').empty();
                    for (var i = 0; i < obj.length; i++) {
                        $('.message-box').append(
                      '<li hoseid=' + obj[i].House_Id + ' class="fcBlack clearfix">' +
                      '<a href="/HouseMessage/HouseMessage?House_Id=' + obj[i].House_Id + '"' + ' target="view_frame" class="fcBlack">' +
                      '<img class="fcBlack fl" src=\"http://47.93.33.136:8080/userfiles/1/images/adminReleaseRoom/img/2017/08/fangjian.jpg\" alt="图片"/>' +
                      '<div>' +
                      '<p class="fn-font-16 fcBlack">' + obj[i].House_Name + '</p>' +
                      '<p><span class="fn-font-clor-red">' + obj[i].House_Price + '</span>元/月</p>' +
                      '<p>可租面积 <span>' + obj[i].House_Area + 'm<sup>2</sup></span> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; <span class="fn-font-12">' + obj[i].House_Intro + '</span></p>' +
                      '</a>' +
                      '</div>' +
                      '</li>'
                  )
                    }
                }
            })
        }
    })
    //搜索代码块结束
</script>
<!--自己加点地址信息查看-->
